<template>
	<view class="">

		<scroll-view scroll-x="true" class="bg-white">
			<view class="a-c b_y   banmi_flex hede-Bottom-line">
				<view class="" v-for="(vo,index) in menu_list" :key="index" style="flex-shrink: 0;">
					<button @click="on_nav(index)" class="p-l-r-20">
						<text :class="menu_index==index ? 'navigation-select' : 'navigation'">{{vo.name}}</text>
					</button>
				</view>
			</view>
		</scroll-view>


		<view class="">
			<view class="  bg-white  ">
				<view class="p-10 f-w-800 f-14 hede-title">
					框架内置各平台编辑功能,应用用到才需要填写
				</view>
				<view v-for="(vo,index) in template_list" v-if="vo.is_show">
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name">{{vo.content}}:
						</view>
						<view class="banmi_input_view">

							<uni-easyinput style="min-width: 740rpx;" v-if="vo.val=='text'" v-model="find[vo.field]"
								:placeholder="vo.placeholder">
							</uni-easyinput>
							<upColor v-if="vo.val=='color'" class="banmi_input_val flex a-c" :val="find[vo.field]"
								:field="vo.field" @confirm="confirm_color">

							</upColor>


							<view v-if="vo.val=='richtext'" style="width: 100%;border: solid 1rpx #c0c0c0;">
								<BmEditor @change="confirm_richtext($event,vo.field)" :content="find[vo.field]"
									mode="default" :height="500" :placeholder="vo.placeholder"> </BmEditor>
							</view>


							<view v-if="vo.val=='map'">

								<view class="p-b-10">
									{{find[vo.field]}}
								</view>

								<view class="m-l-10 flex">

									<button style="background-color: #0000FF;" size="mini" type="primary"
										@click="on_map(vo.field)">{{vo.placeholder}}</button>
								</view>
							</view>


							<view v-if="vo.val=='system_article'" class="banmi_input_val p-t-10"
								style="min-width: 740rpx;">
								<uni-data-select @change="change_system_article($event,vo.field)"
									:value="find[vo.field]" :localdata="localdata_list">
								</uni-data-select>
							</view>

							<template v-if="vo.val=='down_select'">
								<uni-data-select style="min-width: 740rpx;"
									@change="change_down_select($event,vo.field)" :localdata="vo.json|getJson"
									:value="find[vo.field]">
								</uni-data-select>
							</template>


							<!-- 	    图片      视频       音频  
							t_type == images ==  video ==   music
							 -->

							<upImg ref="upimg" :field="vo.field" :val='1' name="图片" :list="find[vo.field]|getlist"
								:count="1" t_type="images" v-if="vo.val=='img'" @confirm="confirm">
							</upImg>

							<upImg ref="upimg" :field="vo.field" :val='1' name="视频" :list="find[vo.field]" :count="1"
								t_type="video" v-if="vo.val=='video'" @confirm="confirm">
							</upImg>

							<upImg ref="upimg" :field="vo.field" :val='1' name="音频" :list="find[vo.field]" :count="1"
								t_type="music" v-if="vo.val=='music'" @confirm="confirm">
							</upImg>

							<view class="banmi_flex a-c"
								v-if="vo.val == 'key' || vo.val == 'cert' || vo.val == 'crt'  ">
								<uni-easyinput v-model="find[vo.field]" :placeholder="vo.placeholder">
								</uni-easyinput>
								<upKey class="m-l-10" :field="vo.field" :val='1' name="key" @confirm="confirmkey">
								</upKey>
							</view>

							<uni-easyinput style="min-width: 740rpx;" :maxlength="-1" v-if="vo.val=='content'"
								type="textarea" v-model="find[vo.field]" :placeholder="vo.placeholder">
							</uni-easyinput>

							<template v-if="vo.val=='select'">
								<uni-data-checkbox @change="checkbox($event,vo.field)" :value="find[vo.field]"
									:localdata="vo.json" :index="index" mode="default"></uni-data-checkbox>
							</template>
							<template v-if="vo.val=='arr_select'">
								 
								<uni-data-checkbox @change="checkboxArr($event,vo.field)"   :value="find[vo.field]" 
									:localdata="vo.json|jsonarr" :index="index" mode="default" multiple></uni-data-checkbox>
							</template>
							<template v-if="vo.val=='date'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">
									<uni-datetime-picker type="date" :value="find[vo.field]" @maskClick="find[vo.field]"
										@change="confirm_time" />
								</view>
							</template>

							<template v-if="vo.val=='datetime'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">
									<uni-datetime-picker type="datetime" :value="find[vo.field]"
										style="min-width: 740rpx;" @maskClick="find[vo.field]"
										@change="confirm_datetime" />
								</view>

							</template>
							<template v-if="vo.val=='datetimerange'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">

									<uni-datetime-picker type="datetimerange" rangeSeparator="至"
										@change="confirm_datetimerange" :value="find[vo.field]" />
								</view>

							</template>
							<template v-if="vo.val=='daterange'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">
							
									<uni-datetime-picker type="daterange" rangeSeparator="至" 
										@change="confirm_datetimerange" :value="find[vo.field]" />
								</view>
							
							</template>




							<template v-if="vo.val=='city'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">
									<uni-data-picker @change="confirm_city" :value="find[vo.field]"
										:localdata="provinceData">
									</uni-data-picker>
								</view>
							</template>



							<template v-if="vo.val=='business_time'">
								<view style="min-width: 740rpx;" @click="on_time(vo.field)">
									<uni-datetime-lot @change="confirm_business_time" :value="find[vo.field]"
										:placeholder="vo.placeholder">
									</uni-datetime-lot>
								</view>


							</template>


						</view>
					</view>




					<view class="banmi_flex" v-if="vo.notes">
						<view class="banmi_input_name">
						</view>
						<view class="banmi_input_view m-l-10">
							<text class="f-14  cred">{{vo.notes}}</text>
						</view>
					</view>
				</view>




				<view class="banmi_flex a-c p-10">
					<view class="banmi_input_name"></view>
					<view class="banmi_input_view ml">
						<button style="background-color: #0000FF;" @click="on_save" type="primary"
							size="mini">保存</button>
					</view>
				</view>
				<view class="" style="height: 500px;">

				</view>
			</view>


		</view>


		<fdPicker ref="fdPicker" @change="accepted"></fdPicker>

		<upMapQq v-if="is_map" @close="is_map=false" class="banmi_input_val flex a-c" :banmi_key="find.tx_map_key"
			@confirm="confirm_mapqq">
		</upMapQq>

	</view>


	</view>
</template>

<script>
	import timeSlot from "@/components/times-lot/times-lot.vue"
	import fdPicker from "@/components/fd-picker/index.vue";
	import provinceData from '@/components/fd-picker/city-china.json';
	export default {
		components: {
			timeSlot,
			fdPicker
		},
		data() {
			return {
				menu_list: [],
				provinceData: provinceData, //本地省市区数据
				menu_index: 0,
				template_list: [],
				find: {},
				content: '',
				is_map: false,
				localdata_list: []





			}
		},
		filters: {
			getJson(val) {
				return JSON.parse(val)
			}
		},

		onLoad(on) {

			this.plugin_catalogue = on.catalogue
			this.plugin_id = on.banmi_plugin ? on.banmi_plugin : on.plugin_id

			this.Article_list_init();

		},
		methods: {
			checkboxArr(e,field){
			 
				 	this.find[field] = e.detail.value 
			},
			confirm_datetimerange(e) {
				this.find[this.field] = e
			},

			confirm_business_time(e) {
				this.find[this.field] = e;
			},
			confirm_city(e) {
				this.find[this.field] = e.detail.value[0]["text"] + '/' + e.detail.value[1]["text"] + '/' + e.detail.value[
					2]["text"];

			},
			confirm_datetime(e) {
				this.find[this.field] = e;
			},
			on_time(field) {
				this.field = field;

			},
			confirm_time(e) {
				this.find[this.field] = e;
			},
			change_down_select(e, field) {
				this.find[field] = e;

			},
			change_system_article(e, field) {
				this.find[field] = e;
			},
			async Article_list_init() {
				var that = this;
				let requestParams = {
					page: 1,
					paginate: 2000,
				};
				const ret = await this.Banmikeji.Article_list(requestParams);
				if (ret.status == 200) {
					this.list = ret.data.list.data;
					var localdata_list = [];
					for (var i = 0; i < this.list.length; i++) {
						var find = {
							'text': this.list[i]['name'],
							'value': this.list[i]['id'],
						}
						localdata_list.push(find);
					}
					this.localdata_list = localdata_list;
					this.init();
				}
			},
			confirm_richtext(val, field) {
				this.find[field] = val;
			},
			change_time_lot(e) {
				console.log("e: " + JSON.stringify(e));
			},
			confirm_mapqq(e) {
				this.find[this.field] = e;
				this.is_map = false;

			},
			on_map(field) {
				let that = this;
				this.field = field;
				this.is_map = true;

			},
			open_city() {
				this.$refs.fdPicker.reelect()
				this.$refs.fdPicker.show = true
			},
			accepted() {

			},
			confirmTime() {

			},
			openTime() {
				this.$refs.timeslot.open()
			},
			on_Editor(e) {

			},
			changes_witch(e) {
				console.log("e: " + JSON.stringify(e));
			},
			checkbox(e, field) {


				this.find[field] = e.detail.value

			},
			confirmkey(pem, field, val, name) {
				this.find[field] = pem;
				this.$forceUpdate()
			},
			confirm(list, img_url, field, val, name) {
				if (list.length > 0) {
					this.find[field] = list[0]['attachment'];
				} else {
					this.find[field] = '';
				}

			},
			confirm_color(field, val) {
				this.find[field] = val;

			},
			async on_save() {
				var requestParams = {
					plugin_id: this.plugin_id,
					plugin_catalogue: this.plugin_catalogue,
					banmi_banmi_plugin: this.plugin_catalogue,
					config: JSON.stringify(this.find)
				}
				const ret = await this.Banmikeji.Configurationtemplate_save(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})

			},
			on_nav(index) {
				this.menu_index = index;
				this.template_list = [];
				let that = this;

				this.template_list = this.menu_list[index]['list']


				var is_true = 0
				for (var i = 0; i < this.template_list.length; i++) {
					if (this.template_list[i]['val'] == 'img') {
						var is_true = 1
					}

				}
				if (is_true == 1) {
					setTimeout(function() {
						that.$refs.upimg[0].init();
					}, 100);
				}



			},
			for (list) {
				for (var i = 0; i < list.length; i++) {
					if (list[i]['val'] == 'select') {
						list[i]['json'] = JSON.parse(list[i]['json'])

					}
				}
				return list;
			},
			async init() {
				var data = {
					plugin_id: this.plugin_id,
					plugin_catalogue: this.plugin_catalogue,
					banmi_banmi_plugin: this.plugin_catalogue,

				}
				const ret = await this.Banmikeji.Configurationtemplate_index(data);

				this.menu_list = ret.data.get_config


				for (var i = 0; i < this.menu_list.length; i++) {
					this.menu_list[i]['list'] = this.for(this.menu_list[i]['list']);
				}

				this.template_list = this.menu_list[0]['list'];

				if (ret.data.find) {
					this.find = ret.data.find;
				} else {
					this.find = {
						'wx_mp_name': '',
					};
				}


			},

		}
	}
</script>

<style>
	button {
		background-color: transparent;

	}

	button::after {
		border: none;
	}

	.navigation-select {
		border-bottom: solid 3px #1E90FF;
		padding-bottom: 5px;
		color: #1E90FF;
		font-size: 14px;
	}

	.navigation {
		border-bottom: solid 3px #fff;
		padding-bottom: 5px;
		color: #000;
		font-size: 14px;
	}
</style>